<script setup lang="ts">
import Model from '@/components/common/Model.vue'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const $router=useRouter()
const model=ref(null),curr=ref<any>({})
interface Props{
  visible?:boolean,
  modelValue?:any,
  addresses?:Array<any>
}
const props=withDefaults(defineProps<Props>(),{
  visible:false,
  addresses(){
    return []
  },
  modelValue(){
    return {}
  }
})
const emit=defineEmits<{
  (e: 'update:visible',val): void
  (e: 'update:modelValue',val): void
}>()
watch(() => props.visible,(_visible,__visible) =>{
  if(_visible==__visible) return
  if(_visible){
    model.value?.showModel()
  }else{
    model.value?.hideModel()
  }
})
watch(() => props.modelValue,(_modelValue,__modelValue) =>{
  if(_modelValue==__modelValue) return
  if(_modelValue._id){
    curr.value=_modelValue
  }
})
function close(){
  emit('update:modelValue',curr.value)
  emit('update:visible',false)
}
//选择地址
function chooseAddress(item){
  curr.value=item
  close()
}
//新增地址
function addAddress(){
  $router.push('/settings/addressedit')
}
</script>

<template>
  <Model mode="bottom" ref="model" @hide="close">
    <div
      w:h="250 max-screen"
      w:w="screen"
      w:bg="white"
      w:border="rounded-t-2xl"
      w:p="6"
      w:pos="relative"
    >
      <div
        w:m="b-4"
        w:text="center 4xl"
      >配送至</div>
      <div v-for="(item,idx) in props.addresses" :key="item._id" @click="chooseAddress(item)"
        w:m="y-6"
        w:flex="~ nowrap"
        w:align="items-center"
      >
        <div class="iconfont icon-check-on" v-if="curr._id==item._id"
          w:text="4xl red-600"
        ></div>
        <div class="iconfont icon-check-off" v-else
          w:text="4xl"
        ></div>
        <div
          w:m="l-4"
        >
          <div :class="[curr._id==item._id?'font-bold':'']"
            w:text="3xl"
            w:m="b-2"
          >{{item.formatted_address.split(' ')[1]}}</div>
          <div
            w:text="2xl"
          >{{item.formatted_address.split(' ')[0]}}</div>
        </div>
      </div>
      <div @click="addAddress"
        w:w="full"
        w:flex="~"
        w:align="items-center"
        w:justify="center"
        w:pos="absolute bottom-0 left-0"
        w:p="4"
      >
        <div
          w:flex="1"
          w:bg="red-600"
          w:text="white center"
          w:border="rounded-full"
          w:p="y-5 x-4"
        >新建收货地址</div>
      </div>
      <div class="iconfont icon-close" @click="close"
        w:pos="absolute top-4 right-4"
      ></div>
    </div>
  </Model>
</template>

<style scoped lang="scss">

</style>